<template>
	<image
		:mode="mode"
		:src="innerSrc"
		:style="{ width: Math.round(upx2px(width)) + 'px', height: height ? Math.round(upx2px(height)) + 'px' : 'auto' }"
		@error="handleError"
	/>
</template>

<script>
import { ref, watch } from 'vue';
import { FALLBACK_IMG } from '../../../utils/media';
export default {
	props: {
		mode: {
			default: 'aspectFit',
			type: String,
		},
		src: String,
		width: Number,
		height: Number,
	},
	setup(props) {
		const innerSrc = ref();
		watch(
			() => props.src,
			(v) => {
				innerSrc.value = v || FALLBACK_IMG;
			},
			{
				immediate: true,
			}
		);
		function handleError() {
			innerSrc.value = FALLBACK_IMG;
		}
		return {
			innerSrc,
			handleError,
			upx2px: uni.upx2px,
		};
	},
};
</script>

<style></style>
